@font-face {
  font-family: 'MarmeladRegular';
  src: url('./font/marmelad-regular-webfont.eot');
  src: url('./font/marmelad-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('./font/marmelad-regular-webfont.woff') format('woff'),
  url('./font/marmelad-regular-webfont.ttf') format('truetype'),
  url('./font/marmelad-regular-webfont.svg#MarmeladRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  font: 13px 'MarmeladRegular', Helvetica, Arial, sans-serif;
  color: #ccc;
  background: #555;
  margin: 30px;
}
header, footer { display: block; margin-top: 10px; clear: both; }
/* Headline */
h1 { font-size: 150%; }
h1.term { border-left: 4px solid #0099ff; padding-left: 8px; }
#main header > h1 {
  font-size: 180%;
  color: #222;
  text-shadow: 0px 2px 3px #666;
}
#index section > h1 {
  font-size: 120%;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin: 0px 0px;
}
/* Anchor Link */
a { color: #00aaff; text-decoration: none; }
a:hover { color: #ccc; text-decoration: none; }
/* Input */
input[type="button"] {
  font: normal 100% Tahoma, sans-serif;
  color: #fff;
  background-color: #666;
  border: none;
  padding: 4px 8px;
}
input[type="button"]:hover { background-color: #000; }
input[type="button"]:active { background-color: #0066cc; }
/* List */
dt {
  font-size: 120%;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
}
dd {
  line-height: 150%;
  margin: 0 0 0 10px;
}
/* Select Box */
select { border: 2px solid #ccc; padding: 3px; }
/* Text Area */
textarea { width: 500px; height: 300px; }
/* Table */
table { margin: 10px 20px 0 20px; }
td { border: 1px solid #ccc; padding: 2px; }

/* User Definition ID */
#main {
  width: 1080px;
}
#index {
  width: 220px;
  float: left;
  padding: 5px;
}
#content {
  width: 800px;
  height: 550px;
  float: left;
  border-left: 1px solid #ccc;
  padding: 20px;
}
.wrap { margin-bottom: 10px; }
.copy { color: #ccc; text-decoration: none; }

/* CSS3 Button */
button.clean-gray {
  background: #eee;
  background: -moz-linear-gradient(top, #fff 0%, #bbb 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
  background: -o-linear-gradient(top, #fff, #bbb);
  border: 1px solid #bbb;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: normal 100% Tahoma, sans-serif;
  line-height: 1;
  /*padding: 6px 0;*/
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  /*width: 100px;*/
  height: 25px;
  padding: 5px;
}

button.clean-gray:hover {
  background: #ddd;
  background: -moz-linear-gradient(top, #eee 0%, #aaa 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#aaa));
  background: -o-linear-gradient(top, #eee, #aaa);
  border: 1px solid #aaa;
  cursor: pointer;
  text-shadow: 0 1px 0 #ddd;
}

button.clean-gray:active {
  background: #ccc;
  border: 1px solid #aaa;
  -moz-box-shadow: inset 0 0 5px 2px #bbb, 0 1px 0 0 #999;
  -webkit-box-shadow: inset 0 0 5px 2px #bbb, 0 1px 0 0 #999;
  box-shadow: inset 0 0 5px 2px #bbb, 0 1px 0 0 #999;
}
